<template>
  <a-modal
    width="600px"
    v-model="modalVisible"
    :bodyStyle="bodyStyle"
    :destroyOnClose="true"
    :maskClosable="false"
    :title="title"
    @cancel="cancel"
  >
    <template slot="footer">
      <a-button key="back" @click="cancel"> 关闭 </a-button>
    </template>

    <a-tabs default-active-key="1" size="small">
      <a-tab-pane key="1" tab="基础信息">
        <a-descriptions
          bordered
          class="eip-descriptions"
          size="small"
          :column="{ xxl: 1, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
        >
          <a-descriptions-item label="登录名">
            {{ user.code }}
          </a-descriptions-item>
          <a-descriptions-item label="姓名">
            {{ user.name }}
          </a-descriptions-item>
          <a-descriptions-item label="手机号码">
            {{ user.mobile }}
          </a-descriptions-item>
          <a-descriptions-item label="邮箱">
            {{ user.email }}
          </a-descriptions-item>
          <a-descriptions-item label="其他联系信息">
            {{ user.otherContactInformation }}
          </a-descriptions-item>
          <a-descriptions-item label="禁用">
            {{ user.isFreezeFormatter }}
          </a-descriptions-item>
          <a-descriptions-item label="类型">
            {{ user.statusName }}
          </a-descriptions-item>
          <a-descriptions-item label="备注">
            {{ user.remark }}
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
      <a-tab-pane key="2" tab="角色">
        <vxe-table
          border
          show-header-overflow
          show-overflow
          highlight-hover-row
          size="small"
          height="300px"
          :data="role"
        >
          <vxe-table-column
            type="seq"
            title="序号"
            width="60"
          ></vxe-table-column>
          <vxe-table-column field="name" title="名称"></vxe-table-column>
          <vxe-table-column
            field="organization"
            title="组织架构"
          ></vxe-table-column> </vxe-table
      ></a-tab-pane>

      <a-tab-pane key="3" tab="岗位">
        <vxe-table
          border
          show-header-overflow
          show-overflow
          highlight-hover-row
          size="small"
          height="300px"
          :data="post"
        >
          <vxe-table-column
            type="seq"
            title="序号"
            width="60"
          ></vxe-table-column>
          <vxe-table-column field="name" title="名称"></vxe-table-column>
          <vxe-table-column
            field="organization"
            title="组织架构"
          ></vxe-table-column>
        </vxe-table>
      </a-tab-pane>
      <a-tab-pane key="4" tab="组">
        <vxe-table
          border
          show-header-overflow
          show-overflow
          highlight-hover-row
          size="small"
          height="300px"
          :data="group"
        >
          <vxe-table-column
            type="seq"
            title="序号"
            width="60"
          ></vxe-table-column>
          <vxe-table-column field="name" title="名称"></vxe-table-column>
          <vxe-table-column
            field="organization"
            title="组织架构"
          ></vxe-table-column> </vxe-table
      ></a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import { detail } from "@/services/system/user/detail";
export default {
  name: "detail-user",
  data() {
    return {
      bodyStyle: {
        padding: "4px",
      },
      user: {},
      role: [],
      group: [],
      post: [],
      modalVisible: this.visible,
    };
  },

  watch: {
    visible(val) {
      this.modalVisible = val;
    },
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
  },

  methods: {
    /**
     * 取消
     */
    cancel() {
      this.$emit("close");
    },

    /**
     * 查找权限信息
     */
    find(id) {
      let _this = this;
      detail(id).then(function(result) {
        let form = result.data;
        _this.role = form.role;
        _this.group = form.group;
        _this.post = form.post;
        _this.user = form;
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-tabs-bar {
  margin: 0 0 4px 0 !important;
}

.eip-descriptions /deep/ .ant-descriptions-item-colon {
  width: 140px !important;
}
</style>
